<template>

    <div>
        <Card>

            <p slot="title"> 权限设置 </p>
            <!-- search start -->
            <div class="search">
                <span>当前角色 >>>> {{current_role }} </span>
            </div> <!-- end search -->

            <main>
                <div class="ws_detail_setting">
                    <div class="left">
                        <span>
                            小程序空间信息工位详情
                        </span>
                    </div>

                    <div class="right">
                        <div class="info">
                            <Checkbox style="width:100px" :value="is_check_all_room" @click.prevent.native="handle_check_all('room')">空间信息：</Checkbox>
                            <CheckboxGroup v-model="check_room" @on-change="checkAllGroupChange($event,'room')">
                                <Checkbox class="item" v-for="item in room_info_list" :key="item.id" :label="JSON.stringify(item)"> {{ item.name }} </Checkbox>
                            </CheckboxGroup>
                        </div>
                        <div class="info">
                            <Checkbox style="width:100px" :value="is_check_all_company" @click.prevent.native="handle_check_all('company')">企业信息：</Checkbox>
                            <CheckboxGroup v-model="check_company" @on-change="checkAllGroupChange($event,'company')">
                                <Checkbox class="item" v-for="item in company_info_list" :key="item.id" :label="JSON.stringify(item)"> {{ item.name }} </Checkbox>
                            </CheckboxGroup>
                        </div>
                        <div class="info">
                            <Checkbox style="width:100px" :value="is_check_all_remark" @click.prevent.native="handle_check_all('remark')">备注信息：</Checkbox>
                            <CheckboxGroup v-model="check_remark" @on-change="checkAllGroupChange($event,'remark')">
                                <Checkbox class="item" v-for="item in remark_info_list" :key="item.id" :label="JSON.stringify(item)"> {{ item.name }} </Checkbox>
                            </CheckboxGroup>
                        </div>
                        <div class="info">
                            <Checkbox style="width:100px" :value="is_check_all_message" @click.prevent.native="handle_check_all('message')">留言信息：</Checkbox>
                            <CheckboxGroup v-model="check_message" @on-change="checkAllGroupChange($event,'message')">
                                <Checkbox class="item" v-for="item in message_info_list" :key="item.id" :label="JSON.stringify(item)"> {{ item.name }} </Checkbox>
                            </CheckboxGroup>
                        </div>

                    </div>
                </div>

            </main>

            <div style="width:100%;text-align: center;">
                <Button style="width:200px; margin:30px auto" type="primary" @click="save">保存</Button>
            </div>
        </Card>
    </div>

</template>

<script>
    import {
        mapMutations,
        mapGetters
    } from 'vuex'
    import axios from '@/libs/api.request'
    export default {
        data() {
            return {

                /***************************   空间信息  ********************************/
                // 是否全选空间信息
                is_check_all_room: false,

                // 已选择的空间信息
                check_room: [],

                // 空间信息列表
                room_info_list: [{
                        id: 1,
                        name: '分部',
                        key: 'branch'
                    },
                    {
                        id: 2,
                        name: '楼层',
                        key: 'floor'
                    },
                    {
                        id: 3,
                        name: '区域',
                        key: 'region'
                    },
                    {
                        id: 4,
                        name: '办公编号',
                        key: 'number'
                    },
                    {
                        id: 5,
                        name: '办公类型',
                        key: 'work_type'
                    },
                    {
                        id: 6,
                        name: '面积',
                        key: 'measure'
                    },
                    {
                        id: 7,
                        name: '价格',
                        key: 'price'
                    },
                    {
                        id: 8,
                        name: '面建议使用人数',
                        key: 'suggest_person_num'
                    },
                    {
                        id: 9,
                        name: '有无室内空调',
                        key: 'is_indoor_air'
                    },
                    {
                        id: 10,
                        name: '窗户朝向',
                        key: 'window_direction'
                    },
                ],

                /***************************   公司信息  ********************************/
                // 是否全选公司信息
                is_check_all_company: false,

                // 已选择的公司信息
                check_company: [],

                // 公司信息列表
                company_info_list: [{
                        id: 1,
                        name: '公司名称',
                        key: 'company_name'
                    },
                    {
                        id: 2,
                        name: '负责人',
                        key: 'company_person'
                    },
                    {
                        id: 3,
                        name: '办公人员',
                        key: 'company_work_preson'
                    },
                    {
                        id: 4,
                        name: '到期时间',
                        key: 'company_out_time'
                    },
                    {
                        id: 5,
                        name: '公司简介',
                        key: 'company_introduce'
                    },
                    {
                        id: 6,
                        name: '主营业务',
                        key: 'company_business'
                    },

                ],

                /***************************   备注信息  ********************************/
                // 是否全选备注信息
                is_check_all_remark: false,

                // 已选择的备注信息
                check_remark: [],

                // 备注信息列表
                remark_info_list: [{
                    id: 1,
                    name: '备注',
                    key: 'remark'
                }, ],

                /***************************   留言信息  ********************************/
                // 是否全选留言信息
                is_check_all_message: false,

                // 已选择的留言信息
                check_message: [],

                // 留言信息列表
                message_info_list: [{
                    id: 1,
                    name: '留言',
                    key: 'message'
                }, ],

                formItem: {
                    mini_ws_detail: {
                        branch: 0,
                        floor: 0,
                        region: 0,
                        number: 0,
                        work_type: 0,
                        measure: 0,
                        price: 0,
                        suggest_person_num: 0,
                        is_indoor_air: 0,
                        window_direction: 0,
                        company_name: 0,
                        company_person: 0,
                        company_work_preson: 0,
                        company_out_time: 0,
                        company_introduce: 0,
                        company_business: 0,
                        remark: 0,
                        message: 0
                    }
                },

                // 当前角色
                current_role: '',
                // 角色id
                role_id: -1,
            }
        },
        methods: {

            // 全选
            handle_check_all(mk) {
                if (mk == 'room') {
                    this.is_check_all_room = !this.is_check_all_room

                    if (this.is_check_all_room) {
                        this.room_info_list.forEach(item => {

                            for (let key in this.formItem.mini_ws_detail) {
                                if (key == item.key) {
                                    this.formItem.mini_ws_detail[key] = 1
                                }
                            }

                            this.check_room.push(JSON.stringify(item))
                        })
                    } else {

                        this.room_info_list.forEach(item => {
                            for (let key in this.formItem.mini_ws_detail) {
                                if (key == item.key) {
                                    this.formItem.mini_ws_detail[key] = 0
                                }
                            }
                            this.check_room.push(JSON.stringify(item))
                        })
                        this.check_room = []
                    }
                }
                if (mk == 'company') {
                    this.is_check_all_company = !this.is_check_all_company

                    if (this.is_check_all_company) {
                        this.company_info_list.forEach(item => {

                            for (let key in this.formItem.mini_ws_detail) {
                                if (key == item.key) {
                                    this.formItem.mini_ws_detail[key] = 1
                                }
                            }

                            this.check_company.push(JSON.stringify(item))
                        })
                    } else {

                        this.company_info_list.forEach(item => {
                            for (let key in this.formItem.mini_ws_detail) {
                                if (key == item.key) {
                                    this.formItem.mini_ws_detail[key] = 0
                                }
                            }
                            this.check_company.push(JSON.stringify(item))
                        })
                        this.check_company = []
                    }
                }
                if (mk == 'remark') {
                    this.is_check_all_remark = !this.is_check_all_remark

                    if (this.is_check_all_remark) {
                        this.remark_info_list.forEach(item => {

                            for (let key in this.formItem.mini_ws_detail) {
                                if (key == item.key) {
                                    this.formItem.mini_ws_detail[key] = 1
                                }
                            }

                            this.check_remark.push(JSON.stringify(item))
                        })
                    } else {

                        this.remark_info_list.forEach(item => {
                            for (let key in this.formItem.mini_ws_detail) {
                                if (key == item.key) {
                                    this.formItem.mini_ws_detail[key] = 0
                                }
                            }
                            this.check_remark.push(JSON.stringify(item))
                        })
                        this.check_remark = []
                    }
                }
                if (mk == 'message') {
                    this.is_check_all_message = !this.is_check_all_message

                    if (this.is_check_all_message) {
                        this.message_info_list.forEach(item => {

                            for (let key in this.formItem.mini_ws_detail) {
                                if (key == item.key) {
                                    this.formItem.mini_ws_detail[key] = 1
                                }
                            }

                            this.check_message.push(JSON.stringify(item))
                        })
                    } else {

                        this.message_info_list.forEach(item => {
                            for (let key in this.formItem.mini_ws_detail) {
                                if (key == item.key) {
                                    this.formItem.mini_ws_detail[key] = 0
                                }
                            }
                            this.check_message.push(JSON.stringify(item))
                        })
                        this.check_message = []
                    }
                }
            },

            // 单选
            checkAllGroupChange(e, mk) {
                if (mk == 'room') {

                    if (e.length === this.room_info_list.length) {
                        this.is_check_all_room = true
                    } else {
                        this.is_check_all_room = false
                    }

                    this.room_info_list.forEach(item => {
                        this.formItem.mini_ws_detail[item.key] = 0
                        this.check_room.forEach(row => {
                            row = JSON.parse(row)
                            if (item.key == row.key) {
                                this.formItem.mini_ws_detail[row.key] = 1
                            }
                        })
                    })
                }
                if (mk == 'company') {

                    if (e.length === this.company_info_list.length) {
                        this.is_check_all_company = true
                    } else {
                        this.is_check_all_company = false
                    }

                    this.company_info_list.forEach(item => {
                        this.formItem.mini_ws_detail[item.key] = 0
                        this.check_company.forEach(row => {
                            row = JSON.parse(row)
                            if (item.key == row.key) {
                                this.formItem.mini_ws_detail[row.key] = 1
                            }
                        })
                    })
                }
                if (mk == 'remark') {

                    if (e.length === this.remark_info_list.length) {
                        this.is_check_all_remark = true
                    } else {
                        this.is_check_all_remark = false
                    }

                    this.remark_info_list.forEach(item => {
                        this.formItem.mini_ws_detail[item.key] = 0
                        this.check_remark.forEach(row => {
                            row = JSON.parse(row)
                            if (item.key == row.key) {
                                this.formItem.mini_ws_detail[row.key] = 1
                            }
                        })
                    })
                }
                if (mk == 'message') {

                    if (e.length === this.message_info_list.length) {
                        this.is_check_all_message = true
                    } else {
                        this.is_check_all_message = false
                    }

                    this.message_info_list.forEach(item => {
                        this.formItem.mini_ws_detail[item.key] = 0
                        this.check_message.forEach(row => {
                            row = JSON.parse(row)
                            if (item.key == row.key) {
                                this.formItem.mini_ws_detail[row.key] = 1
                            }
                        })
                    })
                }
            },

            // 获取角色权限详情
            get_role_power_detail() {
                let data = {
                    roleid: this.role_id
                }
                axios.ajax_post('admin-role-ajax_get_role_detail', data).then(res => {
                    if (res.data.code === 1) {
                        this.current_role = res.data.data.detail.name
                        let mini_ws_detail = res.data.data.detail.mini_ws_detail


                        if (Object.keys(mini_ws_detail).length > 0) {
                            this.formItem.mini_ws_detail = mini_ws_detail

                            this.check_room = []
                            this.check_company = []
                            this.check_remark = []
                            this.check_message = []

                            for (let row in this.formItem.mini_ws_detail) {
                                this.room_info_list.map(item => {
                                    if (row == item.key && this.formItem.mini_ws_detail[row] == 1) {
                                        this.check_room.push(JSON.stringify(item))
                                        if (this.check_room.length == this.room_info_list.length) this.is_check_all_room = true;
                                        else this.is_check_all_room = false
                                    }
                                })
                                this.company_info_list.map(item => {
                                    if (row == item.key && this.formItem.mini_ws_detail[row] == 1) {
                                        this.check_company.push(JSON.stringify(item))
                                        if (this.check_company.length == this.company_info_list.length) this.is_check_all_company = true;
                                        else this.is_check_all_company = false
                                    }
                                })
                                this.remark_info_list.map(item => {
                                    if (row == item.key && this.formItem.mini_ws_detail[row] == 1) {
                                        this.check_remark.push(JSON.stringify(item))
                                        if (this.check_remark.length == this.remark_info_list.length) this.is_check_all_remark = true;
                                        else this.is_check_all_remark = false
                                    }
                                })
                                this.message_info_list.map(item => {
                                    if (row == item.key && this.formItem.mini_ws_detail[row] == 1) {
                                        this.check_message.push(JSON.stringify(item))
                                        if (this.check_message.length == this.message_info_list.length) this.is_check_all_message = true;
                                        else this.is_check_all_message = false
                                    }
                                })
                            }

                        }
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            // 保存
            save() {
                let {
                    ...data
                } = this.formItem
                data.roleid = this.role_id
                axios.ajax_post('admin-role-ajax_save_role', data).then(res => {
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: res.data.msg,
                            duration: 3
                        })
                        this.get_role_power_detail()
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

        },
        created() {
            this.role_id = this.$route.params.id
            this.get_role_power_detail()
        },

        activated() {
            if (this.$route.params.id) {
                if (this.role_id !== this.$route.params.id) {
                    this.role_id = this.$route.params.id
                    this.get_role_power_detail()
                }
            }
        }
    }
</script>

<style lang='less' scoped>
    .search {
        margin-bottom: 14px;
        padding-left: 10px;

        span {
            font-weight: 700;
            font-size: 14px;

        }
    }

    main {
        .ws_detail_setting {
            margin: 50px auto;
            width: 80%;
            display: flex;
            border: 3px solid #FF9502;
            border-radius: 2px;

            .left {
                text-align: center;
                width: 50px;
                padding: 20px;
                background-color: #FF9502;
                color: #fff;
                font-size: 14px;
                font-weight: 700
            }

            .right {

                box-sizing: border-box;
                padding: 15px;

                .info {
                    display: flex;
                    justify-content: flex-start;
                    margin-bottom: 50px;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .item {
                        margin-right: 15px;
                    }
                }


            }
        }
    }
</style>